$(document).ready(function () {
    $('.hideDiv').hide();
    // $('.imgContainer').hide()


/*

下面的这段代码表示鼠标移动上去和移开的效果，
由于随机index的写法不太熟悉，因而给每个div
设置不同index，故而复制多段代码,虽然达到效
果，但是代码较为冗余，后序改进

*/
    $('.conForjs0').mouseover(function () {
        $('.img0').hide();
        $('.hideDiv').show()

    })//end mouseover



    $('.conForjs0').mouseout(function () {
        $('.hideDiv').hide()
        $('.img0').show();


    })//end mouseout


    $('.conForjs1').mouseover(function () {
        $('.img1').hide();
        $('.hideDiv').show()

    })//end mouseover



    $('.conForjs1').mouseout(function () {
        $('.hideDiv').hide()
        $('.img1').show();


    })//end mouseout

    $('.conForjs2').mouseover(function () {
        $('.img2').hide();
        $('.hideDiv').show()

    })//end mouseover



    $('.conForjs2').mouseout(function () {
        $('.hideDiv').hide()
        $('.img2').show();


    })//end mouseout

    $('.conForjs3').mouseover(function () {
        $('.img3').hide();
        $('.hideDiv').show()

    })//end mouseover



    $('.conForjs3').mouseout(function () {
        $('.hideDiv').hide()
        $('.img3').show();


    })//end mouseout

    $('.conForjs4').mouseover(function () {
        $('.img4').hide();
        $('.hideDiv').show()

    })//end mouseover



    $('.conForjs4').mouseout(function () {
        $('.hideDiv').hide()
        $('.img4').show();


    })//end mouseout

    $('.conForjs5').mouseover(function () {
        $('.img5').hide();
        $('.hideDiv').show()

    })//end mouseover



    $('.conForjs5').mouseout(function () {
        $('.hideDiv').hide()
        $('.img5').show();


    })//end mouseout

    //上面是重复的代码片段555555555




    //设置底部文字
    $('.buttonDiv a,.buttonDivElse a').hover(
        function () {
            $(this).css({
                color:"black"
            })
        },
        function () {
            $(this).css({
                color:""
            })
        }
    )




})//end ready